<!DOCTYPE html>
<html lang="zh_cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <!-- 引入Vue.js -->
    <script src="/assets/js/vue@2.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="assets/css/index.css">
    <!-- 引入组件库 -->
    <script src="assets/js/index.js"></script>
    <script src="assets/js/axios.min.js"></script>
</head>

<body>
<div id="app" class="app">
    <el-container v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-header>
            <h2>找回密码</h2>
        </el-header>
        <el-main>
            <div>
                <el-form ref="AccountForm" :model="resetForm" label-width="140px">
                    <el-form-item label="邮箱">
                        <el-input v-model="resetForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="修改后密码">
                        <el-input v-model="resetForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱验证码">
                        <el-input v-model="resetForm.code"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="Send">发送邮件验证码</el-button>
                <el-button type="primary" @click="onSubmit">找回密码</el-button>
            </div>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            resetForm: {
                email: '',
                code: '',
                password: ''
            },
            formLabelWidth: '120px',
            loading: false
        },
        methods: {
            onSubmit() {
                this.loading = true;
                if (!this.resetForm.code) {
                    this.$message.error('请输入邮箱验证码');
                    this.loading = false;
                    return;
                }
                const currentDomain = window.location.origin;
                axios.post(`${currentDomain}/index/userapi/recover.html`, this.resetForm)
                    .then(response => {
                        this.loading = false;
                        const data = response.data;
                        if (data.code === 200) {
                            this.$message.success(data.message);
                        } else {
                            this.$message.error(data.message);
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        this.$message.error('服务器错误，请联系管理员');
                    });
            },
            Send() {
                this.loading = true;
                const currentDomain = window.location.origin;
                axios.post(`${currentDomain}/index/userapi/send.html`, this.resetForm)
                    .then(response => {
                        this.loading = false;
                        const data = response.data;
                        if (data.code === 200) {
                            this.$message.success(data.message);
                        } else {
                            this.$message.error(data.message);
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        this.$message.error('服务器错误，请联系管理员');
                    });
            }
        }
    });
</script>

<style>
    body {
        background-image: url(https://api.ciyuandun.com/?like=pc-genshin-wallhaven);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app {
        width: 80%;
        display: flex;
        margin: 0 auto;
        align-items: center;
        background-color: rgba(255, 255, 255, .5);
        border-radius: 15px;
    }

    .el-input__inner {
        background-color: rgba(255, 255, 255, .5);
    }

    .el-form-item__label {
        color: black;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
    }

    .el-header > h2 {
        line-height: 50%;
    }

    .el-main {
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    @media (max-width: 768px) {
        .el-main {
            line-height: 120px;
        }
    }

    @media (max-width: 480px) {
        .el-main {
            line-height: 80px;
        }

        .el-header > h2 {
            font-size: 24px;
        }
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
</body>

</html>